﻿@page "/list-view"
@inject IOptionsMonitor<WebsiteOptions> WebsiteOption
@inject IStringLocalizer<ListViews> Localizer

<h3>@Localizer["ListViewsTitle"]</h3>

<h4>@Localizer["ListViewsSubTitle"]</h4>

<div class="lv-demo">
    <DemoBlock Title="@Localizer["BasicUsageTitle"]"
               Introduction="@Localizer["BasicUsageIntro"]"
               Name="Normal">
        <p>@((MarkupString)Localizer["BasicUsageP1"].Value)</p>
        <ListView TItem="Product" Items="@Products" OnListViewItemClick="OnListViewItemClick">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <img src="@context.ImageUrl" />
                        <div class="lv-demo-desc">@context.Description</div>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
            <FooterTemplate>
                <div class="text-end">
                    Copyright Bootstrap Blazor
                </div>
            </FooterTemplate>
        </ListView>

        <ConsoleLogger @ref="Logger" class="mt-3" />
    </DemoBlock>

    <DemoBlock Title="@Localizer["PaginationTitle"]"
               Introduction="@Localizer["PaginationIntro"]"
               Name="Pagination">
        <ListView TItem="Product" Pageable="true" PageItems="21" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <img src="@context.ImageUrl" />
                        <div class="lv-demo-desc">@context.Description</div>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
        </ListView>
    </DemoBlock>

    <DemoBlock Title="@Localizer["GroupTitle"]"
               Introduction="@Localizer["GroupIntro"]"
               Name="Group">
        <ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <img src="@context.ImageUrl" />
                        <div class="lv-demo-desc">@context.Description</div>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
        </ListView>
    </DemoBlock>

    <DemoBlock Title="@Localizer["CollapseTitle"]"
               Introduction="@Localizer["CollapseIntro"]"
               Name="Collapse">
        <ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" CollapsedGroupCallback="CollapsedGroupCallback">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <img src="@context.ImageUrl" />
                        <div class="lv-demo-desc">@context.Description</div>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
        </ListView>
    </DemoBlock>

    <DemoBlock Title="@Localizer["IsAccordionTitle"]"
               Introduction="@Localizer["IsAccordionIntro"]"
               Name="IsAccordion">
        <ListView TItem="Product" GroupName="p => p.Category" OnQueryAsync="@OnQueryAsync" Collapsible="true" IsAccordion="true">
            <HeaderTemplate>
                <div>@Localizer["ProductListText"]</div>
            </HeaderTemplate>
            <BodyTemplate>
                <Card>
                    <BodyTemplate>
                        <img src="@context.ImageUrl" />
                        <div class="lv-demo-desc">@context.Description</div>
                    </BodyTemplate>
                </Card>
            </BodyTemplate>
        </ListView>
    </DemoBlock>
</div>

<AttributeTable Items="GetAttributes()"></AttributeTable>

<MethodTable Items="GetMethods()"></MethodTable>
